<template>
    <div>
      <el-form :inline="true">
        <el-form-item label="类型名称">
          <el-input v-model="searchMap.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="类型编码">
          <el-input v-model="searchMap.code" placeholder=""></el-input>
        </el-form-item>
  
        <el-form-item label="状态：">
          <el-radio-group v-model="searchMap.status">
            <el-radio-button label="0">启用</el-radio-button>
            <el-radio-button label="1">停用</el-radio-button>
            <el-radio-button label="">重置</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
        <el-button type="success" @click="handleEdit('')">新增</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </el-form>
  
      <!-- 表格 -->
      <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" fixed prop="id" label="序号">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span>{{ scope.row.status === 0 ? '启用' : scope.row.status === 1 ? '禁用' : '未知' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="类型名称">
        </el-table-column>
        <el-table-column prop="code" label="类型编码">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="created" label="创建时间" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="updated" label="修改时间" :formatter="dataFormat"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
            <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!--分页-->
       
    <el-pagination
      @size-change="sizeData"
      @current-change="pageData"
      :page-sizes="[5,10,20,30,60]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
  
  
      <!--新增-->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form label-width="100px">
  
          <el-row>
            <el-col span="11">
              <el-form-item label="类型名称"><el-input v-model="pojo.name" /></el-form-item>
            </el-col>
            <el-col span="11">
              <el-form-item label="类型编码"><el-input v-model="pojo.code" /></el-form-item>
            </el-col>
          </el-row>
  
          <el-row>
            <el-col span="11">
              <el-form-item label="备注"><el-input v-model="pojo.remark" /></el-form-item>
            </el-col>
            <el-col span="11">
              <el-form-item label="状态">
                <el-radio-group v-model="pojo.status">
                  <el-radio :label="0">启用</el-radio>
                  <el-radio :label="1">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
  
  
          <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="dialogFormVisible = false">关闭</el-button>
          </el-col>
        </el-row>
        </el-form>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  import itemtypeApi from '@/api/item-type'
  //导入日期组件
  import moment from 'moment'
  export default {
    data() {
      return {
        //表格数据
        list: [],
        //查询条件
        searchMap: {
          page: 1,
          limit: 10
        },
        //声明总记录数
        count: 0,
        pojo: {
  
        },
        id: '',
        dialogFormVisible: false,
        //存储选中的行
        multipleSelection: []
  
  
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      //新增和修改(id)
      handleEdit(id) {
        //赋值给全局id
        this.id = id
        //打开弹窗
        this.dialogFormVisible = true
  
        if (id !== '') {
          //根据id查询数据绑定到模型上面
          itemtypeApi.findById(id).then(response => {
            //回显
            this.pojo = response.data
  
          })
        } else {
          //清楚之前模型的脏数据
          this.pojo = {
  
          }
        }
      },
      //序号排序
      handleSortChange({ prop, order }) {
      // 根据prop和order来调整searchMap中的排序参数
      this.searchMap.sortProp = prop;
      this.searchMap.sortOrder = order;
      // 重新加载数据
      this.fetchData();
    },
    //分页大小
      sizeData(size){
          this.searchMap.limit=size
          this.fetchData()
       },
       pageData(page){
         this.searchMap.page=page
         this.fetchData()
       },
      //删除
      handleDelete(id) {
        this.$confirm('您确定要删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
  
            itemtypeApi.delete(id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.fetchData()
  
          })
  
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
  
      },
      
      // 处理选中行变化
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
  
      // 批量删除
      handleBatchDelete() {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请至少选择一行数据',
          });
          return;
        }
        this.$confirm('您确定要批量删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          // 获取选中行的id数组
          const ids = this.multipleSelection.map(item => item.id);
          // 调用API进行批量删除
          const batchDelete  = {
          ids: ids
        }
          itemtypeApi.batchRemove(batchDelete).then(response => {
            this.$message({
              type: 'success',
              message: '批量删除成功!',
            });
            // 重新加载列表的数据
            this.fetchData();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量删除',
          });
        });
      },
      //新增和修改保存数据的方法
      handleSave() {
        itemtypeApi.update(this.id, this.pojo).then(response => {
          //新增或者修改成功
          this.$message({
            message: response.msg,
            type: 'success'
          })
  
          //重新加载列表的数据
          this.fetchData()
  
  
          //关闭弹窗
          this.dialogFormVisible = false
        })
      },
      //增加一个格式化日期的方法
      dataFormat(row, column) {
        let date = row[column.property]
        if (date == undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD hh:mm:ss')
      },
      //查询数据
      fetchData() {
        itemtypeApi.list(this.searchMap).then(response => {
          this.list = response.data;
          this.count = response.count;
        })
      },
  
    }
  }
  </script>